<template>

    <v-container class="mt-2 ">
        <v-navigation-drawer app
                             class="grey lighten-3"
                             absolute
                             width="200"
        >
            <v-card class="grey lighten-3">
                <v-list
                        dense
                        nav
                        class="py-0"
                >
                    <v-list-item two-line class="px-0">
                        <v-list-item-avatar>
                            <img src="@/assets/portrait.jpg" width="40" height="40">
                        </v-list-item-avatar>

                        <v-list-item-content>
                            <v-list-item-title>Master_Yoda</v-list-item-title>
                            <v-list-item-subtitle>日拱一卒</v-list-item-subtitle>
                        </v-list-item-content>
                    </v-list-item>
                    <v-divider></v-divider>
                    <v-list-item
                            class="mt-2"
                    >
                        <v-list-item-content>
                            <v-list-item-title>总访问量</v-list-item-title>
                            <v-list-item-subtitle>{{viewCounts}}</v-list-item-subtitle>
                        </v-list-item-content>
                        <v-list-item-content>
                            <v-list-item-title>文章数</v-list-item-title>
                            <v-list-item-subtitle>{{articleCount}}</v-list-item-subtitle>
                        </v-list-item-content>
                    </v-list-item>

                </v-list>
            </v-card>
            <v-card class=" grey lighten-3">
                <v-card-title class="py-0">
                    微信公众号
                </v-card-title>
               <v-img class="ml-8" src="@/assets/qrcode.jpg" width="120" height="120"
               ></v-img>
            </v-card>
            <v-card class=" grey lighten-3">
                <v-card-title>
                    类别
                </v-card-title>
                <v-card-text>
                    <v-list
                            dense
                            nav
                            class="py-0"
                    >
                        <v-divider></v-divider>
                        <!--类别列表-->
                        <v-list-item
                                class="mt-2"
                                v-for="(item, index) in categoryData"
                                :key="item.id"
                                link
                        >
                            <v-list-item-content>
                                <v-list-item-title>{{item.cateName}}</v-list-item-title>
                            </v-list-item-content>
                            <v-list-item-content>
                                <v-list-item-title>{{item.articleCount}}</v-list-item-title>

                            </v-list-item-content>
                        </v-list-item>
                    </v-list>
                </v-card-text>
            </v-card>
        </v-navigation-drawer>
    </v-container>


</template>

<script>
  import NavigationToolBar from '@/components/NavigationToolBar'

  export default {
    name: 'navigation',
    data() {
      return {
        categoryData: [],
        articleCount: '0',
        viewCounts:'0'
      }
    },
    components: {
      NavigationToolBar
    },
    methods: {
      //获取文章类别列表
      async getAllArticleCategories() {
        try {

          //const {data: res} = await this.$http.get('categories');
          this.categoryData =[{'cateName':'java'},{'cateName':'python'}]
          /*if (res.errorCode == 200) {
            this.categoryData = res.data;
          }*/

        } catch (e) {
          alert('查询文章类别失败，请重试！');
        }
      },
      /*
        获取文章总数
       */
      async getAricleCounts() {
        try {
          //const {data: res} = await this.$http.get('/articles/counts');
          this.articleCount = 10;
        } catch (e) {
          alert("获取文章总数失败！");
        }
      },
      /**
       * 获取文章阅读总数
       * @returns {Promise<void>}
       */
      async getArticleViewCounts() {
        try {
          /*const {data: res} = await this.$http.get('/articles/view/counts');
          console.log('----viewCounts');
          console.log(res);*/
          this.viewCounts = 10000;
        } catch (e) {
          alert("获取阅读总数失败！");
        }
      }

    },
    created() {
      /**
       * 获取文章类别列表
       */
      this.getAllArticleCategories();
      /**
       * 获取文章总数
       */
      this.getAricleCounts();
      /**
       * 获取文章阅读总数
       */
      this.getArticleViewCounts();
    }
  }
</script>

<style lang="less" scoped>
    /* .avatar_box {
         padding: 5px;
         .avatar_box_img{
             transform: translateX(60%);
             width: 100px;
             height: 100px;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50% ;
            }
     }*/


</style>